<template>
    <!-- 这个页面 报废了  可以删除 -->
    <div
        class="largeprepayqry-contnair"
        v-loading="isLoading"
        element-loading-background="rgba(250, 250, 250, 0.7)"
    >
        <cardComponent pageTitle="分期付款交易明细查询">
            <template slot="cardBody">
                <el-form
                    ref="LargepreFormRef"
                    :rules="LargepreFormRules"
                    :model="LargepreForm"
                    label-width="100px"
                    size="small"
                >
                    <el-row>
                        <el-col :span="6">
                            <el-form-item label="主卡卡号 : ">
                                <el-input
                                    disabled
                                    v-model="LargepreForm.CARDNBR"
                                    style="width: 100%;"
                                ></el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :span="6">
                            <el-form-item label="起始日期 : " prop="BEGDAY">
                                <dataTime
                                    start
                                    @startT="startT"
                                    :endDates="LargepreForm.ENDDAY"
                                    :a="LargepreForm.BEGDAY"
                                ></dataTime>
                            </el-form-item>
                        </el-col>
                        <el-col :span="6">
                            <el-form-item label="结束日期 : " prop="ENDDAY">
                                <dataTime
                                    end
                                    @endT="endT"
                                    :startDates="LargepreForm.BEGDAY"
                                    :b="LargepreForm.ENDDAY"
                                ></dataTime>
                            </el-form-item>
                        </el-col>
                        <el-col :span="6">
                            <el-form-item size="small" label-width="20px">
                                <el-button
                                    type="primary"
                                    size="small"
                                    @click="onTrial('LargepreFormRef')"
                                >查 询</el-button>
                                <el-button type="primary" size="small" @click="onReset">重 置</el-button>
                            </el-form-item>
                        </el-col>
                    </el-row>
                </el-form>

                <!-- 分期付款交易明细查询详情 -->
                <el-card shadow="never" v-if="showTrial">
                    <div slot="headerss" class="clearfix">
                        <span>分期付款交易明细查询详情</span>
                        <el-button
                            style="float: right; padding: 3px 20px;"
                            type="text"
                            @click="showTrial = false"
                        >关 闭</el-button>
                    </div>
                    <div>
                        <el-table
                            :data="tableData"
                            border
                            stripe
                            style="width: 100%;"
                            highlight-current-row
                            class="heard-bg business_table"
                        >
                            <el-table-column
                                min-width="85"
                                prop="PRODID"
                                label="编号"
                                show-overflow-tooltip
                            ></el-table-column>
                            <el-table-column prop="BEGYM_1" label="交易日期" min-width="93"></el-table-column>
                            <el-table-column
                                prop="DESC1"
                                label="描述"
                                min-width="77"
                                show-overflow-tooltip
                            ></el-table-column>
                            <el-table-column
                                prop="STATUS_1"
                                label="状态"
                                min-width="77"
                                show-overflow-tooltip
                            ></el-table-column>
                            <el-table-column prop="MPTYPE_1" label="分期付款类型" min-width="77"></el-table-column>
                            <el-table-column
                                prop="CURRNUM_1"
                                label="币种"
                                min-width="64"
                                show-overflow-tooltip
                            ></el-table-column>
                            <el-table-column prop="CARDNBR_1" label="卡号" min-width="53"></el-table-column>
                            <el-table-column
                                prop="MPAMT"
                                label="分期付款金额"
                                min-width="65"
                                show-overflow-tooltip
                            ></el-table-column>
                            <el-table-column
                                prop="MPMTHS"
                                label="期数"
                                min-width="40"
                                show-overflow-tooltip
                            ></el-table-column>
                            <el-table-column
                                prop="MPINSTAL"
                                label="月还款额"
                                min-width="70"
                                show-overflow-tooltip
                            ></el-table-column>
                            <el-table-column
                                prop="FEEAMT"
                                label="手续费金额"
                                min-width="65"
                                show-overflow-tooltip
                            ></el-table-column>
                            <el-table-column
                                prop="LASTBPL"
                                label="上月已摊消本金"
                                min-width="80"
                                show-overflow-tooltip
                            ></el-table-column>
                            <el-table-column
                                prop="INSTCNT"
                                label="已摊消次数"
                                min-width="65"
                                show-overflow-tooltip
                            ></el-table-column>
                            <el-table-column
                                prop="PAYAMT"
                                label="已摊销总金额"
                                min-width="80"
                                show-overflow-tooltip
                            ></el-table-column>
                            <el-table-column
                                prop="PPLMTHS"
                                label="剩余期数"
                                min-width="50"
                                show-overflow-tooltip
                            ></el-table-column>
                            <el-table-column
                                prop="REMPBAL"
                                label="剩余未摊销本金"
                                min-width="80"
                                show-overflow-tooltip
                            ></el-table-column>
                            <el-table-column
                                prop="FEETYPE_1"
                                label="手续费收取类型"
                                min-width="80"
                                show-overflow-tooltip
                            ></el-table-column>
                            <el-table-column
                                prop="REMFEE"
                                label="剩余未摊销手续费"
                                min-width="80"
                                show-overflow-tooltip
                            ></el-table-column>
                            <el-table-column
                                prop="EVERYFEE_1"
                                label="每期需还手续费"
                                min-width="80"
                                show-overflow-tooltip
                            ></el-table-column>
                        </el-table>
                        <el-card shadow="never" v-if="showCount" class="countFormC">
                            <el-form ref="countFormRef" :model="countForm" size="mini">
                                <el-row>
                                    <el-col :span="6">
                                        <el-form-item label="剩余未摊销本金汇总 : " label-width="150px">
                                            <el-input
                                                disabled
                                                :value="(countForm.first).toFixed(2)"
                                                style="width: 100%;"
                                            ></el-input>
                                        </el-form-item>
                                    </el-col>
                                    <el-col :span="6">
                                        <el-form-item label="剩余未摊销手续费汇总 : " label-width="180px">
                                            <el-input
                                                disabled
                                                :value="(countForm.second).toFixed(2)"
                                                style="width: 100%;"
                                            ></el-input>
                                        </el-form-item>
                                    </el-col>
                                    <el-col :span="12">
                                        <el-form-item
                                            label="分期付款待摊销金额汇总 = 剩余未摊销本金 + 剩余未摊销手续费 : "
                                            label-width="430px"
                                        >
                                            <el-input
                                                disabled
                                                :value="(countForm.all).toFixed(2)"
                                                style="width: 100%;"
                                            ></el-input>
                                        </el-form-item>
                                    </el-col>
                                </el-row>
                            </el-form>
                        </el-card>
                        <div class="footer">
                            <!-- <el-button type="primary" size="small" @click="onChoiceTrial">提前还款试算</el-button>
                            <el-button type="primary" size="small" @click="onChoice">提前还款</el-button>-->
                            <el-button
                                :disabled="currentPageIndex <= 0"
                                type="primary"
                                size="small"
                                @click="handleChangePage('pre')"
                            >上一页</el-button>
                            <el-button
                                :disabled="nextButtonFlag"
                                type="primary"
                                size="small"
                                @click="handleChangePage('next')"
                            >下一页</el-button>
                        </div>
                    </div>
                </el-card>
            </template>
        </cardComponent>
    </div>
</template>

<script>
import moment from 'moment';


import { mapState } from 'vuex';
import cardComponent from '@/components/cardComponent/cardComponent.vue';
import dataTime from '@/components/datePocker/TimeStartToEnd.vue';
import { getAllInstalmentList, getDictSelectList } from '@/utils/Common';
import { get_3xxx, get_4xxx } from '@/apis/getAPIClass';
import { setNumber, ChangePage } from '@/utils/Object';


export default {
    name: 'Mptransqry',
    // 混入的调用 ， 如同名后面的会覆盖前面的混入
    mixins: [Defaultmodules, modules],
    data() {
        return {
            countForm: {
                first: 0,
                second: 0,
                all: 0,
            },
            nextChang: '',
            showCount: false,
            nextIndex: 0,
            LargepreForm: {
                CARDNBR: '',
                BEGDAY: '',
                ENDDAY: '',
            },
            LargepreFormRules: {
                BEGDAY: [
                    {
                        required: true,
                        message: '请输入起始日期！',
                        trigger: 'blur',
                    },
                ],
                ENDDAY: [
                    {
                        required: true,
                        message: '请输入结束日期！',
                        trigger: 'blur',
                    },
                ],
            },
            id: '',
            currentRow: null,
            tableData: [{}],
            pagingDataList: [], // 翻页上送字段列表
            currentPageIndex: 0, // 当前页,
            nextButtonFlag: true, // 下翻页按钮 显示控制阀
            MPNO: '0', // 翻页分期付款序号首次查询时送起始序号，默认为0 下翻页查询时上送上次查询结果的最后一条记录返回的交易序号
            RTNIND: '', // 首次查询上送空； 下翻页查询上送1；
            BEGYM: '00000000',
            showTrial: false,
            isLoading: false,
            CURRENCYList: [],
            MPSTATUSList: [],
            MPTYPList: [],
            fenqitype: [],
            sxf_typeList: [],
        };
    },
    components: {
        cardComponent,
        dataTime,
    },
    computed: {
        ...mapState({
            defaultParams: state => state.common.defaultParams, // 接口默认参数
            cardInfo_3004: state => state.common.cardInfo_3004,
        }),
    },
    async mounted() {
        this.onLoadOBJ();
        // 货币代码转汉字
        this.CURRENCYList = await getDictSelectList('CURRENCY', this);
        this.MPSTATUSList = await getDictSelectList('MPSTATUS', this);
        this.MPTYPList = await getDictSelectList('MPTYP', this);
        // 手續費收取類型
        this.sxf_typeList = await getDictSelectList('SXF', this);
        this.fenqitype = (await this.$post.common.getInstalmentNoList({
            itemNo: '',
        })).data.content;
        console.log(this.sxf_typeList);
    },
    methods: {
        onLoadOBJ() {
            this.LargepreForm.CARDNBR = this.cardInfo_3004.CARDNO;
        },
        // 查询 3037
        async onTrial(ref) {
            this.$refs[ref].validate(async (valid) => {
                if (!valid) return this.$message.warning('验证错误，请核实填写数据！');
                this.countForm.first = 0;
                this.countForm.second = 0;
                this.countForm.all = 0;
                this.isLoading = true;
                this.nextChang = '';
                this.nextIndex = 0;
                this.showCount = false;

                this.id = '';
                this.pagingDataList = []; // 清空缓存 申请编号 -> 相当于首次查询
                this.MPNO = '0';
                this.RTNIND = '';
                this.BEGYM = '00000000';
                this.get_3077();
                // this.showTrial = true;
            });
        },
        // 提前还款试算 4073
        // async onChoiceTrial() {
        //   this.isLoading = true;
        //   if (this.currentRow === null) {
        //     this.isLoading = false;
        //     return this.$alert(`请选择一条记录列表！`, "油心分试算提示！", {
        //       confirmButtonText: "确定",
        //       center: true,
        //       type: "warning ",
        //       showClose: false
        //     });
        //   }
        //   let res = await this.get_4073(this.currentRow.MPNO, 0, 0, "", "T");
        //   console.log(res);
        //   // 如果没有body 则 不执行后面操作
        //   if (!res.body) return false;
        //   this.$alert(`油心分提前还款试算成功！`, "油心分试算提示！", {
        //     confirmButtonText: "确定",
        //     center: true,
        //     type: "success ",
        //     showClose: false
        //   });
        //   this.showTrial = true;
        //   this.isLoading = false;
        // },
        // 提前还款 4073
        // async onChoice() {
        //   this.isLoading = true;
        //   if (this.currentRow === null) {
        //     this.isLoading = false;
        //     return this.$alert(`请选择一条记录列表！`, "油心分提前还款提示！", {
        //       confirmButtonText: "确定",
        //       center: true,
        //       type: "warning ",
        //       showClose: false
        //     });
        //   }
        //   let res = await this.get_4073(this.currentRow.MPNO, 0, 0, "", "");
        //   console.log(res);
        //   // 如果没有body 则 不执行后面操作
        //   if (!res.body) return false;
        //   this.$alert(`油心分提前还款申请成功！`, "油心分提前还款提示！", {
        //     confirmButtonText: "确定",
        //     center: true,
        //     type: "success ",
        //     showClose: false
        //   });
        //   this.showTrial = true;
        //   this.isLoading = false;
        // },
        // 获取 4073
        async get_4073(MPNUMBER, NOFEE, NREMFEE, FEEPCT, ACTION) {
            // 设置 4073请求头
            console.log(MPNUMBER, NOFEE, NREMFEE, FEEPCT, ACTION);
            const appBody = {
                CARDNBR: this.LargepreForm.CARDNBR, // 卡号
                OPTION: 1,
                PINFLAG: 0,
                MPNUMBER: MPNUMBER || '', // 分期付款序号
                NOFEE: NOFEE || '', // 免除提前还款手续费0-不免除，1-免除
                NREMFEE: NREMFEE || '', // 免除提前还款未分摊手续费 0-不免除，1-免除
                FEEPCT: FEEPCT || '', // 提前还款未分摊手续费减免比例 “免除提前还款未分摊手续费”不为零的情况下才能填写；
                ACTION: ACTION || '', // 空：提前还款 T：提前还款试算默认为空
            };
            const resultData = await get_4xxx(
                '4073',
                '油心分专项分期',
                appBody,
                this,
            );
            // 成功之后当前显示
            this.isLoading = false;
            this.showTrial = true;
            this.$message.success('获取数据成功');
            return resultData;

            this.isLoading = false;
        },
        async get_3077() {
            this.isLoading = true;
            const appBody_3077 = {
                CARDNBR: this.LargepreForm.CARDNBR || '', // 卡号,
                PINFLAG: 0,
                OPERCODE: '0', // 操作代码0:全部返回1：可提前还款的分期交易2：可撤销的分期交易
                MPTYPE: 'Z', // 分期付款类型
                OPT: '1', // 查询方式
                BEGDAY: this.LargepreForm.BEGDAY, // 起始日期
                ENDDAY: this.LargepreForm.ENDDAY, // 终止日期
                RTNIND: this.pagingDataList.length === 0 ? '' : 1, // 翻页标志
                NEXTDAY: this.BEGYM, // 首次查询时送查询起始日期，下翻页查询时上送上次查询结果的最后一条记录返回的分期付款交易日期
                NEXTMPNO: this.MPNO, // 首次查询时送起始序号，默认为0 下翻页查询时上送上次查询结果的最后一条记录返回的交易序号 选填
            };
            let bool = false;
            if (this.pagingDataList.length == 0) bool = true;

            const res_3077 = await get_3xxx(
                '3077',
                '分期付款交易',
                appBody_3077,
                this,
                true,
                bool,
            );
            if (!res_3077) {
                if (this.pagingDataList.length != 0) {
                    this.showCount = true;
                    this.$message.warning('已经到最后一条数据');
                }
                this.nextButtonFlag = true;
                return false;
            }
            if (!this.nextButtonFlag && res_3077.body.appBody.dataList.length < 5) {
                console.log(1);
                this.showCount = true;
            } else if (!this.nextButtonFlag) {
                console.log(2);
                // this.showCount = true;
            } else {
                this.showCount = false;
                console.log(3);
            }
            // 数据成功之后
            const res = res_3077.body.appBody.dataList;

            // 处理展示数据，已放在默认混入文件，各银行请到单独混入文件单独设置
            this.setTableData(res);

            this.showTrial = true;
            // 翻页设置
            ChangePage(this, ['BEGYM', 'MPNO'], 'tableData', 5);

            this.isLoading = false;
        },
        // handleCurrentChange(val) {
        //   this.currentRow = val;
        //   this.id = val.MPNO;
        // },
        // 上下页切换
        handleChangePage(type) {
            this.nextChang = type;
            if (type === 'pre') {
                // this.showCount = false
                if (this.nextIndex != 0) {
                    this.nextIndex -= 1;
                } else {
                    this.nextIndex -= 2;
                }
                // 切换到上一页
                if (this.currentPageIndex - 2 < 0) {
                    this.pagingDataList = []; // 清空缓存 申请编号 -> 相当于首次查询
                    this.MPNO = '0';
                    this.RTNIND = '';
                    this.BEGYM = '00000000';
                } else {
                    this.currentPageIndex = this.currentPageIndex - 2;
                    this.MPNO = this.pagingDataList[this.currentPageIndex].MPNO;
                    this.BEGYM = this.pagingDataList[this.currentPageIndex].BEGYM;
                }
                this.get_3077();
            } else {
                if (this.nextIndex < 0) {
                    this.nextIndex += 1;
                }
                // 切换到下一页
                this.get_3077();
            }
            // if(this.pagingDataList.length >= this.nextIndex) {
            //   this.nextIndex = this.pagingDataList.length
            // }
        },
        // 处理展示数据，
        setTableData(res) {
            res.forEach((e) => {
                e.CARDNBR = e.CARDNBR.trim();
                e.CARDNBR_1 = e.CARDNBR.substring(e.CARDNBR.length - 4);
                if ((`${e.BEGYM}`).trim()) {
                    e.BEGYM_1 = moment(`${e.BEGYM}`).format('YYYY-MM-DD');
                }
                // 设置卡号后四位
                e.CARDNBR_1 = (`${e.CARDNBR}`).substr((`${e.CARDNBR}`).length - 4);
                // 设置币种
                e.CURRNUM_1 = e.CURRNUM;
                this.CURRENCYList.forEach((item) => {
                    if ((`${e.CURRNUM}`).trim() === item.code) e.CURRNUM_1 = item.label;
                });
                // 设置分期付款类型
                e.STATUS_1 = e.STATUS;
                this.MPSTATUSList.forEach((item) => {
                    if ((`${e.STATUS}`).trim() == item.code) e.STATUS_1 = item.label;
                });
                // 设置当前状态
                e.MPTYPE_1 = e.MPTYPE;
                this.MPTYPList.forEach((item) => {
                    if ((`${e.MPTYPE}`).trim() === item.code) e.MPTYPE_1 = item.label;
                });
                // 设置每期需还手续费 = 手续费金额 / 期数
                e.EVERYFEE_1 = e.FEEAMT / e.MPMTHS; // .toFixed(2);
                // 设置手续费支付类型
                // console.log(e.CREDPLAN, "所属信用计划");
                // console.log(this.fenqitype, "this.fenqitype");
                this.fenqitype.forEach((item) => {
                    if (e.CREDPLAN === item.itemNo) {
                        if (item.nbrMths.indexOf(e.MPMTHS) !== -1) {
                            let qishu = [];
                            qishu = item.nbrMths.split(','); // 分期期数数组
                            let fenqitype = [];
                            fenqitype = item.paytype.split(','); // 分期类型数组
                            // console.log(fenqitype, "fenqitypefenqitypefenqitype");
                            let i = 0;
                            let j; // 分期类型
                            for (i = 0; i < qishu.length; i++) {
                                if (qishu[i] == e.MPMTHS) {
                                    j = fenqitype[i];
                                }
                            }
                            this.sxf_typeList.forEach((item) => {
                                if (j == item.code) {
                                    e.FEETYPE_1 = item.label;
                                }
                            });
                        }
                    }
                });

                // 设置6409独有的字段处理 月手续费费率 FEEAMT_MPAMT
                let FEEAMT_MPAMT = 0;
                FEEAMT_MPAMT = e.FEEAMT * 100;
                if (e.MPAMT !== 0) {
                    FEEAMT_MPAMT /= e.MPAMT;
                }
                e.FEEAMT_MPAMT = `${FEEAMT_MPAMT}%`;
                // 设置6409独有的字段处理 剩余未还本金 FEEAMT_MPAMT
                e.PPLAMT_RESPPL = e.PPLAMT + e.RESPPL;

                // 统计汇总 点击下一页才相加, 否则不改变
                if (this.nextChang !== 'pre' && this.nextIndex == 0) {
                    this.countForm.first += e.REMPBAL * 1;
                    this.countForm.second += e.REMFEE * 1;
                    this.countForm.all += e.REMPBAL * 1 + e.REMFEE * 1;
                }
                if ((`${e.CURRNUM}`).trim() == 156) e.CURRNUM_1 = '人民币';
                if ((`${e.CURRNUM}`).trim() === '446') e.CURRNUM_1 = '澳门币';
                if ((`${e.CURRNUM}`).trim() == 840) e.CURRNUM_1 = '美元';
                // this.srcMapList.forEach(i => {
                //   if ((e.MPTYPE + "").trim() == i.code ) {
                //     e.MPTYP_1  = i.label
                //   }
                // })
            });
            this.tableData = [...res];
        },
        // 重置
        onReset() {
            this.LargepreForm.MPTYPE = 'Z';
            this.LargepreForm.BEGDAY = '';
            this.LargepreForm.ENDDAY = '';
            this.id = '';
            this.currentRow = null;
            this.$refs.LargepreFormRef.resetFields();
        },
        startT(data) {
            this.LargepreForm.BEGDAY = data;
        },
        endT(data) {
            this.LargepreForm.ENDDAY = data;
        },
    },
};
</script>

<style  scoped lang="scss">
.largeprepayqry-contnair {
    .countFormC {
        margin-top: 10px;

        // padding-top: 1rem;
        // border: 1px solid #F5F7FA;
    }
    /deep/.el-card__header {
        padding: 8px !important;
    }
    /deep/.form-row {
        width: 100%;
        margin: 0 auto;
        .el-form {
            //   text-align: left;
            margin: 0 auto;
            //   width: 500px;
            .el-form-item {
                text-align: left;
            }
        }
        .el-select {
            width: 100%;
            margin-bottom: 15px;
        }
    }

    .el-form-item {
        text-align: left;
        // margin-bottom: 0;
    }
    .footer {
        text-align: center;
        margin-top: 10px;
    }
}
</style>
